<template>
    <el-dialog draggable v-model="dialog.show" width="600px" :before-close="handleClose" class="custom-dialog">
      <template #header> 编辑规格 </template>
      <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100">
        <el-form-item label="名称" prop="label">
          <el-input v-model="forms.label" placeholder="规格名称" clearable class="width-220"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="specType">
          <el-select v-model="forms.specType" placeholder="选择类型" @change="onTypeChange" class="width-220">
            <el-option v-for="item in specOptions" :key="item.id" :label="item.label" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 单行 多行文本 -->
        <el-form-item label="默认值" prop="defaultValue" v-if="[1, 2, 5].includes(forms.specType)">
          <el-input v-model="forms.defaultValue" placeholder="默认值" clearable :type="forms.specType === 2 ? 'textarea' : ''"></el-input>
        </el-form-item>
        <template v-if="[3, 4].includes(forms.specType)">
          <!-- 单选 多选 -->
          <el-form-item label="关联字段" prop="selectType">
            <el-select v-model="forms.selectType" placeholder="选择类型">
              <el-option v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <!--- 单行 多行选择自定义 --->
          <el-form-item label="下拉备选" prop="selectValue" v-if="forms.selectType === 1">
            <el-input v-model="forms.selectValue" type="textarea" placeholder="每个选项请用回车分开" clearable></el-input>
          </el-form-item>
        </template>
        <!--- 数值  --->
        <template v-if="forms.specType === 5">
          <el-form-item label="小数精度" prop="pointLength">
            <el-input-number v-model.number="forms.pointLength" :min="0" :max="10" placeholder="默认值" clearable></el-input-number>
          </el-form-item>
        </template>
        <!--- 选择日期  --->
        <template v-if="forms.specType === 6">
          <el-form-item label="默认值" prop="pointLength">
            <el-date-picker v-model="forms.defaultValue" placeholder="选择日期时间" value-format="YYYY-MM-DD"> </el-date-picker>
          </el-form-item>
        </template>
  
        <!--- 计算公式  --->
        <template v-if="forms.specType === 7">
          <el-form-item label="填写公式" prop="pointLength">
            <calculator />
          </el-form-item>
        </template>
  
        <el-form-item label="是否启用" prop="isEnable">
          <el-switch v-model="forms.isEnable" :active-value="true" :inactive-value="false" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949">
          </el-switch>
        </el-form-item>
  
        <el-form-item label="是否必填" prop="isRequired">
          <el-switch
            v-model="forms.isRequired"
            :active-value="true"
            :inactive-value="false"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="forms.note" type="textarea" placeholder="备注" clearable></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <z-button type="" @click="handleClose" icon="close">取消</z-button>
          <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { specOptions, selectOptions } from '@/config/data';
  import calculator from './calculator.vue';
  import { post } from '@/api/index.js';
  import { reactive } from 'vue';
  let emit = defineEmits(['update:modelValue', 'onSave']);
  const $message = inject('$message');
  let props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    depOptions: {
      type: Array,
      default: () => {
        return [];
      }
    },
    editData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  });
  
  let registerRef = ref();
  let dialog = reactive({
    show: false,
    loading: false
  });
  let formsInit = () => {
    return reactive({
      id: 0,
      label: '',
      name: '',
      specType: undefined,
      equationLabel: '',
      equationName: '',
      pointLength: 0,
      isRequired: true,
      isEnable: true,
      defaultValue: '',
      selectType: undefined,
      selectValue: '',
      note: '',
      idSorted: 0,
      selectValues: [],
      customType: 0
    });
  };
  let forms = formsInit();
  // 单选 多选 关联字段判断验证
  const validateType = (rule, value, callback) => {
    if ([3, 4].includes(forms.specType)) {
      if (!value) callback(new Error('类型为单选、多选时。必须选择关联字段!'));
      callback();
    }
    callback();
  };
  const validateValue = (rule, value, callback) => {
    if ([3, 4].includes(forms.specType)) {
      if (forms.selectType === 1) {
        if (!value) callback(new Error('关联字段为自定义时,下拉备选必须要有值!'));
        callback();
      }
      callback();
    }
    callback();
  };
  let rules = {
    label: [{ required: true, trigger: 'blur', message: '名称不能为空!' }],
    specType: [{ required: true, trigger: 'blur', message: '请选择规格类型!' }],
    selectType: [{ required: true, validator: validateType, trigger: 'blur' }],
    selectValue: [{ required: true, validator: validateValue, trigger: 'blur' }]
  };
  watch(
    () => props.modelValue,
    val => {
      dialog.show = val;
      if (!val) return;
      let formData = formsInit();
      Object.keys(formData).map(r => {
        forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r];
      });
    },
    {
      immediate: true
    }
  );
  
  const handleClose = () => {
    emit('update:modelValue', false);
  };
  const onCheck = () => {
    if (!registerRef.value) return;
    registerRef.value.validate(async val => {
      if (!val) return;
      try {
        dialog.loading = true;
        await post('CustomProductSpec/CreateOrUpdate', forms);
        $message.success('编辑成功');
        dialog.loading = false;
        emit('onSave');
        registerRef.value.resetFields();
      } catch (error) {
        console.log('CustomProductSpec/CreateOrUpdate 错误', error);
        dialog.loading = false;
      }
    });
  };
  // 规格类型切换
  const onTypeChange = val => {
    forms.defaultValue = specOptions[val - 1].dataType;
    if (val === 5) {
      forms.pointLength = 0;
    }
  };
  </script>
  
  <style lang="scss" scoped></style>
  